<template>
    <div>
       <mt-header fixed title="购物车"></mt-header>


   





<div class="page-navbar">  
    <mt-navbar class="page-part" v-model="selected">  
      <mt-tab-item id="1">体育</mt-tab-item>  
      <mt-tab-item id="2">科技</mt-tab-item>  
      <mt-tab-item id="3">汽车</mt-tab-item>  
      <mt-tab-item id="4">政治</mt-tab-item>  
    </mt-navbar>  
    <!-- tabcontainer -->  
    <mt-tab-container v-model="selected">  
      <mt-tab-container-item id="1">  
      <div class="box" v-for="(sportsNews,index) in sportsNews" :key="index">
                <div class="title">
                    <p>{{sportsNews.title}}</p>
                </div>
            </div> 
      </mt-tab-container-item>  
      <mt-tab-container-item id="2">  
        <mt-cell v-for="n in 4" :title="'测试 ' + n" />  
      </mt-tab-container-item>  
      <mt-tab-container-item id="3">  
        <mt-cell v-for="n in 6" :title="'选项 ' + n" />  
      </mt-tab-container-item>  
         <mt-tab-container-item id="4">  
        <mt-cell v-for="n in 6" :title="'选项 ' + n" />  
      </mt-tab-container-item> 
    </mt-tab-container>  
  </div>  





    </div>
</template>


<script>  
  import {mapGetters,mapActions} from 'vuex';
export default {  
  
  name: 'page-navbar',  
  
  data() {  
    return {  
      selected: '1'  
    };  
  },


    computed:{
      ...mapGetters(['sportsNews']),
  },
  methods:{
      ...mapActions(['getsportsNews']),
    //   searchList(e) {
    //   var val = e.target.value;
    //   this.getNewsList({ title: val });
    // },
  },
  created(){
      this.getsportsNews()
  }

};  
</script> 

<style>

.mint-navbar .mint-tab-item.is-selected{
    border-bottom:3px solid red ;
    display:block !important;
}
</style>